<template>
  <div class="main">
      <!-- 头部栏 -->
      <headnav title="编辑资料"></headnav>
      <div class="avatar">
      <van-uploader class="upload" :after-read="afterRead">
      <img v-if='userinfo.head_img' :src="userinfo.head_img" alt />
      <img v-else src="../assets/xixi.png" alt /></van-uploader>
      </div>
      <div>
          <libarlist mainleft='昵称' :mainright='userinfo.nickname' @click.native="show=true"></libarlist>
           <van-dialog v-model="show" title='编辑昵称' show-cancel-button @confirm='setnickname'>
           <van-field v-model="nickname"  placeholder="请输入要修改的昵称" />
         </van-dialog>
          <libarlist mainleft='密码' :mainright='userinfo.password' @click.native="setpwd=true"></libarlist>
           <van-dialog v-model="setpwd" title='修改密码' show-cancel-button @confirm='setpassword'>
           <van-field v-model="password"  placeholder="请输入要密码" />
         </van-dialog>
          <libarlist mainleft='性别' :mainright='userinfo.gender==1? "男":"女"' @click.native="setsex=true"></libarlist>
            <van-dialog v-model="setsex" title='修改密码' show-cancel-button @confirm='setgender'>
           <van-radio-group v-model="gender" direction="horizontal" class="genderrender">
              <van-radio name="1">男</van-radio>
              <van-radio name="0">女</van-radio>
          </van-radio-group>
         </van-dialog>
      </div>
  </div>
</template>
<script>
import headnav from '../components/headnav'
import libarlist from '../components/libarlist'
export default {
    data(){
       return{
           userinfo:'',
           nickname:'',
           password:'',
           gender:'',
           head_img:'',
           show:false,
           setpwd:false,
           setsex:false,        
       }
    },
  components:{
      headnav,
      libarlist
  },
  created(){
     this.getinfo()
  },
  methods:{
    //获取用户信息的封装函数
      getinfo(){
          this.$axios({
         url:'/user/'+ localStorage.getItem('userId'),
          headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
      }).then(res=>{
        //   console.log(res);
          this.userinfo=res.data.data
          console.log(this.userinfo);       
      })
      },
    //   编辑用户信息的封装函数
      editinfo(data){
         this.$axios({
              url:'/user_update/'+localStorage.getItem('userId'),
              method:'post',
               headers: { Authorization: "Bearer " + localStorage.getItem("token")},          
              data,
          }).then(res=>{
              console.log(res);
               this.getinfo()
          })
      },
    //   修改昵称
      setnickname(){
          this.editinfo({
              nickname:this.nickname
          })
          this.nickname=''
      },
    //   修改密码
      setpassword(){
         this.editinfo({
             password:this.password
         })
          this.password=''
      },
    //   修改性别
      setgender(){
          this.editinfo({
              gender:this.gender
          })
      },
    //   上传图片
    afterRead(file){
      console.log(file);
      const forData = new FormData()
      forData.append('file',file.file)
      console.log(forData);
      this.$axios({
          url:'/upload',
          method:'post',
          headers: { Authorization: "Bearer " + localStorage.getItem("token")},
          data:forData,        
      }).then(res=>{
        //   console.log(res);
          console.log(2323,res.data.data.url);
          this.head_img= "http://127.0.0.1:3000"+ res.data.data.url
          console.log(this.head_img);
          this.editinfo({head_img:this.head_img})
      })
    }   
  }
  
}
</script>

<style lang="less" scoped>
.main{
    padding: 10/360*100vw;
    .avatar{
        display: flex;
        padding: 20/360*100vw;
        justify-content: center;
        align-items: center;
        margin: 20/360*100vw 0;
        img{
         width: 70/360*100vw;
         height: 70/360*100vw;
         border-radius:50%;
        }
    }
}
</style>